<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <canvas id="cvs" width="700" height="700"></canvas>

  <script>
    let cvs = document.getElementById("cvs");
    let cxt = cvs.getContext("2d");

    let grd = cxt.createLinearGradient(0, 0, cvs.width, 0);
    grd.addColorStop(0, "red");
    grd.addColorStop(1, "green");

    cxt.fillStyle = grd;
    cxt.fillRect(0, 0, cvs.width, cvs.height);

    let num = 80;
    cxt.beginPath();
    cxt.translate(cvs.width / 2, cvs.height / 2);
    let radians = 2 * Math.PI / num;
    for (let i = 0; i < num; i++) {
      cxt.beginPath();
      cxt.save();
      cxt.rotate(-radians * i * (num / 10 / 4));
      cxt.scale(i / 2, i / 2);
      cxt.fillStyle = "rgba(255, 255, 255, 0.5)";
      cxt.fillRect(num / 10, 0, 5, 3);
      cxt.restore()
    }
  </script>
</body>
</html>